<template>
  <dialog-View :isShow="_isOpen" :title="'添加备注信息'" :width="'30%'">
    <form-View
      :formList="formList"
      :rules="rules"
      :position="'left'"
      :editItem="orderDetail"
      @update="handelSubmit"
      @back="handelCancel"
    ></form-View>
  </dialog-View>
</template>
<script setup>
import dialogView from "../../components/dialogView.vue";
import formView from "../../components/formView.vue";
import { updateOrderInfo } from "@/apis/order";
import { computed } from "vue";

const formList = [{ label: "备注类容", model: "remark", type: "textarea" }];
const rules = {
  marksContent: [
    { required: true, message: "请输入备注内容", trigger: "blur" },
    { min: 1, max: 200, message: "请输入备注内容", trigger: "blur" }
  ]
};

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  orderDetail: { type: Object, default: () => ({}) }
});

const emit = defineEmits(["update:modelValue", "success"]);

const _isOpen = computed({
  get: () => props.modelValue,
  set: newVal => emit("update:modelValue", newVal)
});

const handelSubmit = async ({ remark }) => {
  await updateOrderInfo({
    orderId: props.orderDetail.orderId,
    remark
  });

  _isOpen.value = false;
  emit("success", "修改备注成功");
};

const handelCancel = () => {
  _isOpen.value = false;
};
</script>
